<template>
  <div class="esign">
    <a-spin v-if="loading" class="spin" />
    <div class="canvas-container" ref="canvas" :style="{width: '100%', height: containerHeight}"></div>
  </div>
</template>

<script>
import ImageEditor from 'tui-image-editor'

export default {
  props: {
    lineWidth: {
      type: Number,
      default: 20
    },
    lineColor: {
      type: String,
      default: '#031F47'
    },
    fileUrl: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      editorInstance: null,
      containerHeight: '100%',
      loading: true
    }
  },
  computed: {
    drawSettings () {
      return {
        width: this.lineWidth,
        color: this.lineColor
      }
    }
  },
  methods: {
    // 获取上传的文件的样式，保持宽高一致
    getParentEleWidth () {
      return +window.getComputedStyle(this.$refs.canvas).width.replace('px', '')
    },
    initImg () {
      this.imgObj = new Image()
      this.imgObj.src = this.fileUrl
      this.imgObj.setAttribute('crossOrigin', 'anonymous')
      // 图片加载完后，将其显示在canvas中
      this.imgObj.onload = (e) => {
        this.loading = true
        this.$emit('loading', true)
        const { naturalWidth, naturalHeight } = e.target
        const parentEleWidth = this.getParentEleWidth()
        this.containerHeight = parentEleWidth > naturalWidth ? naturalHeight + 'px' : parentEleWidth * (naturalHeight / naturalWidth) + 'px'
        this.editorInstance = new ImageEditor(this.$refs.canvas, {
          cssMaxWidth: parentEleWidth,
          cssMaxHeight: this.containerHeight
        })
        this.editorInstance.loadImageFromURL(this.fileUrl, 'image').then(result => {
          this.editorInstance.clearUndoStack()
          this.useLine()
          this.loading = false
          this.$emit('loading', false)
        })
        this.addEventListener()
      }
    },
    useLine () {
      this.editorInstance.startDrawingMode('FREE_DRAWING', this.drawSettings)
    },
    updateDrawSettings (color) {
      if (this.editorInstance.getDrawingMode() === 'FREE_DRAWING') {
        this.editorInstance.stopDrawingMode()
        this.editorInstance.startDrawingMode('FREE_DRAWING', {
          width: this.lineWidth,
          color: color
        })
      } else {
        this.editorInstance.stopDrawingMode()
        this.editorInstance.startDrawingMode('SHAPE')
        this.editorInstance.setDrawingShape('rect', {
          fill: color
        })
      }
    },
    drawShape () {
      if (this.editorInstance.getDrawingMode() !== 'SHAPE') {
        this.editorInstance.stopDrawingMode()
        this.editorInstance.startDrawingMode('SHAPE')
        this.editorInstance.setDrawingShape('rect', {
          fill: this.lineColor
        })
      }
    },
    undo () {
      this.editorInstance.discardSelection()
      this.editorInstance.undo()
    },
    redo () {
      this.editorInstance.discardSelection()
      this.editorInstance.redo()
    },
    reset () {
      this.editorInstance.clearObjects()
    },
    generate () {
      return this.editorInstance.toDataURL()
    },
    addEventListener () {
      this.editorInstance.on('redoStackChanged', length => {
        this.$emit('updateRedo', length)
      })
      this.editorInstance.on('undoStackChanged', length => {
        this.$emit('updateUndo', length)
      })
    }
  }
}
</script>

<style scoped lang="less">
.esign {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.spin {
  position: absolute;
  left: 50%;
  top: 20%;
}
</style>
